<template>
  <div class="multiTableCloumn">
    <!-- <el-button @click="test">test</el-button> -->
    <div class="tableTab">
      <el-radio-group v-model="innerActiveTab" :size="config.size">
        <template v-for="(item, index) in tableTabList">
          <el-radio-button
            :label="item.label"
            :key="'tableTab' + index"
          ></el-radio-button>
        </template>
      </el-radio-group>
    </div>
    <div class="tableBox">
      <vxe-table
        ref="vxeTable"
        height="auto"
        :data="filterTableData"
        class="sortable-row"
        row-key
        :scroll-y="{ enabled: false }"
      >
        <vxe-column width="60">
          <template #default>
            <span class="drag-btn">
              <i class="vxe-icon--menu"></i>
            </span>
          </template>
          <!-- <template #header>
          </template> -->
        </vxe-column>
        <vxe-column
          v-for="item in filterTableColumn"
          :key="item.prop"
          :title="item.label"
          :field="item.prop"
        >
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row[item.prop]"
              v-if="item.type == 'checkbox'"
              @change="
                checkboxChange(
                  $event,
                  scope.rowIndex,
                  item.prop,
                  scope.row.prop,
                  innerActiveTabProp
                )
              "
            />
            <el-input
              v-model="scope.row[item.prop]"
              v-else-if="item.type == 'input'"
            ></el-input>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import config from '../../../config'
import Sortable from '../../../../../assets/sortable/sortable1.10.2.js'

export default {
  name: 'MultiTableCloumn',
  data() {
    return {
      config,
      innerActiveTab: '',
      filterTableData: [],
    }
  },
  props: {
    // 多表列配置
    columnOption: Object,
    // 活跃表Key（多表）
    activeTabProp: String,
    tableTabList: Array,
    activeTab: String,
    filterTableColumn: Array,
    updateColumnOption: Function,
  },
  components: {},
  watch: {
    innerActiveTab: {
      handler() {
        this.initFilterTableData()
      },
      deep: true,
    },
  },
  computed: {
    innerActiveTabProp() {
      if (
        !this.tableTabList ||
        this.tableTabList.length == 0 ||
        !this.innerActiveTab
      ) {
        return ''
      }
      return this.tableTabList.find((tab) => tab.label == this.innerActiveTab)
        .prop
    },
  },
  methods: {
    test() {
      // console.log(this.filterTableData)
    },
    // 行拖拽功能初始化
    rowDrop() {
      this.$nextTick(() => {
        const xTable = this.$refs.vxeTable
        this.sortable1 = Sortable.create(
          xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'),
          {
            handle: '.drag-btn',
            onEnd: ({ newIndex, oldIndex }) => {
              // console.log('拖动行回调参数：', newIndex, oldIndex)
              const currRow = this.filterTableData.splice(oldIndex, 1)[0]
              this.filterTableData.splice(newIndex, 0, currRow)
              this.$emit('update-column-index', {
                newIndex,
                oldIndex,
                tabProp: this.innerActiveTabProp,
              })
            },
          }
        )
      })
    },
    // 设置过滤项数据
    initFilterTableData() {
      // console.log('配置数据初始化')
      let data = this.columnOption[this.innerActiveTabProp]?.map(
        (item, index) => {
          return {
            label: item.label,
            prop: item.prop,
            hide: item.hide,
            fixed: item.fixed,
            sortable: item.sortable,
            width: '',
            showColumn: item.showColumn,
            index,
          }
        }
      )
      data = data.filter((item) => this.$ocean.vaildData(item.showColumn, true))
      this.filterTableData = data || []
      // this.filterTableData = [...data, ...data, ...data]
    },
    // 过滤项更新
    checkboxChange(val, index, attrs, prop, tabProp) {
      // console.log(val, index, prop, attrs, tabProp)
      this.$emit('update-column-option', { val, index, attrs, prop, tabProp })
    },
  },
  created() {},
  mounted() {
    this.innerActiveTab = this.activeTab
    // this.initFilterTableData()
    this.rowDrop()
  },
  beforeDestroy() {
    if (this.sortable1) {
      this.sortable1.destroy()
    }
  },
}
</script>

<style scoped lang="scss">
.multiTableCloumn {
  height: 100%;
  padding: 8px;
  // display: flex;
  // flex-direction: column;

  .tableTab {
  }
  .tableBox {
    margin-top: 8px;
    // flex: 1;
    height: calc(100% - 38px);
  }
  ::v-deep .sortable-row .drag-btn {
    cursor: move;
    font-size: 12px;
  }
  ::v-deep .sortable-row .vxe-body--row.sortable-ghost,
  .sortable-row .vxe-body--row.sortable-chosen {
    background-color: #dfecfb !important;
  }
}
</style>
